<template>
  <view class="break-time-popup" v-if="show" @touchmove.stop.prevent>
    <view class="popup-mask" @click="onClose" @touchmove.stop.prevent></view>
    <view class="popup-content" :class="{ 'popup-show': show }" @touchmove.stop>
      <view class="popup-header">
        <text class="popup-title">请选择休息时间</text>
        <view class="close-btn" @click="onClose">×</view>
      </view>
      
      <view class="break-time-content" @touchmove.stop>
        <view class="time-header">
          <view class="start-time-header">
            <text class="time-label">休息开始时间</text>
            <text class="time-value">{{breakStartHour}}:{{breakStartMinute}}</text>
          </view>
          <view class="end-time-header">
            <text class="time-label">休息结束时间</text>
            <text class="time-value">{{breakEndHour}}:{{breakEndMinute}}</text>
          </view>
        </view>
        
        <view class="duration-tag">
          <text>共{{breakDuration}}小时</text>
        </view>
        
        <view class="picker-container" @touchmove.stop>
          <picker-view class="time-picker" :indicator-style="indicatorStyle" :value="startTimeIndexes" @change="onStartTimeChange">
            <picker-view-column>
              <view class="picker-item" v-for="(hour, index) in hourOptions" :key="'sh'+index">{{hour}}</view>
            </picker-view-column>
            <picker-view-column>
              <view class="picker-item" v-for="(minute, index) in minuteOptions" :key="'sm'+index">{{minute}}</view>
            </picker-view-column>
          </picker-view>
          
          <view class="time-connector">
            <text>至</text>
          </view>
          
          <picker-view class="time-picker" :indicator-style="indicatorStyle" :value="endTimeIndexes" @change="onEndTimeChange">
            <picker-view-column>
              <view class="picker-item" v-for="(hour, index) in hourOptions" :key="'eh'+index">{{hour}}</view>
            </picker-view-column>
            <picker-view-column>
              <view class="picker-item" v-for="(minute, index) in minuteOptions" :key="'em'+index">{{minute}}</view>
            </picker-view-column>
          </picker-view>
        </view>
      </view>
      
      <view class="confirm-btn" @click="onConfirm">
        <text>确定</text>
        <view class="btn-line"></view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'BreakTimePopup',
  props: {
    show: {
      type: Boolean,
      default: false
    },
    initialStartHour: {
      type: String,
      default: '17'
    },
    initialStartMinute: {
      type: String,
      default: '50'
    },
    initialEndHour: {
      type: String,
      default: '18'
    },
    initialEndMinute: {
      type: String,
      default: '20'
    }
  },
  data() {
    return {
      // 休息时间相关
      breakStartHour: this.initialStartHour,
      breakStartMinute: this.initialStartMinute,
      breakEndHour: this.initialEndHour,
      breakEndMinute: this.initialEndMinute,
      breakDuration: '0.5',
      // 时间选择器选项
      hourOptions: ['15', '16', '17', '18', '19', '20', '21'],
      minuteOptions: ['00', '05', '10', '15', '20', '25', '30', '35', '40', '45', '50', '55'],
      // picker-view相关
      indicatorStyle: 'height: 40px; border-top: 1px solid #eee; border-bottom: 1px solid #eee;',
      startTimeIndexes: [2, 10], // 默认选中17:50
      endTimeIndexes: [3, 4]     // 默认选中18:20
    }
  },
  created() {
    // 初始化picker-view的索引值
    this.startTimeIndexes = [
      this.hourOptions.findIndex(h => h === this.breakStartHour),
      this.minuteOptions.findIndex(m => m === this.breakStartMinute)
    ];
    this.endTimeIndexes = [
      this.hourOptions.findIndex(h => h === this.breakEndHour),
      this.minuteOptions.findIndex(m => m === this.breakEndMinute)
    ];
    
    // 初始计算休息时长
    this.calculateBreakDuration();
  },
  watch: {
    show(newVal) {
      if (newVal) {
        // 当弹窗显示时，重新初始化索引值
        this.startTimeIndexes = [
          this.hourOptions.findIndex(h => h === this.breakStartHour),
          this.minuteOptions.findIndex(m => m === this.breakStartMinute)
        ];
        this.endTimeIndexes = [
          this.hourOptions.findIndex(h => h === this.breakEndHour),
          this.minuteOptions.findIndex(m => m === this.breakEndMinute)
        ];
        
        // 重新计算休息时长
        this.calculateBreakDuration();
      }
    },
    initialStartHour(val) {
      this.breakStartHour = val;
    },
    initialStartMinute(val) {
      this.breakStartMinute = val;
    },
    initialEndHour(val) {
      this.breakEndHour = val;
    },
    initialEndMinute(val) {
      this.breakEndMinute = val;
    }
  },
  methods: {
    onClose() {
      console.log('关闭休息时间选择弹窗');
      this.$emit('close');
    },
    onStartTimeChange(e) {
      const values = e.detail.value;
      this.startTimeIndexes = values;
      this.breakStartHour = this.hourOptions[values[0]];
      this.breakStartMinute = this.minuteOptions[values[1]];
      this.calculateBreakDuration();
    },
    onEndTimeChange(e) {
      const values = e.detail.value;
      this.endTimeIndexes = values;
      this.breakEndHour = this.hourOptions[values[0]];
      this.breakEndMinute = this.minuteOptions[values[1]];
      this.calculateBreakDuration();
    },
    calculateBreakDuration() {
      // 计算休息时长
      const startTime = new Date();
      startTime.setHours(parseInt(this.breakStartHour));
      startTime.setMinutes(parseInt(this.breakStartMinute));
      
      const endTime = new Date();
      endTime.setHours(parseInt(this.breakEndHour));
      endTime.setMinutes(parseInt(this.breakEndMinute));
      
      // 如果结束时间早于开始时间，认为是无效的
      if (endTime <= startTime) {
        this.breakDuration = '0';
        return;
      }
      
      // 计算时间差（毫秒）
      const diffMs = endTime - startTime;
      // 转换为小时
      const diffHours = diffMs / (1000 * 60 * 60);
      // 保留一位小数
      this.breakDuration = diffHours.toFixed(1);
    },
    onConfirm() {
      // 验证休息时间是否有效
      if (parseFloat(this.breakDuration) <= 0) {
        uni.showToast({
          title: '休息结束时间必须晚于开始时间',
          icon: 'none'
        });
        return;
      }
      
      console.log('确认休息时间设置');
      // 向父组件传递选择的时间
      this.$emit('confirm', {
        startHour: this.breakStartHour,
        startMinute: this.breakStartMinute,
        endHour: this.breakEndHour,
        endMinute: this.breakEndMinute,
        duration: this.breakDuration
      });
    }
  }
}
</script>

<style lang="scss">
.break-time-popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  
  .popup-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
  }
  
  .popup-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    border-radius: 12px 12px 0 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.3s ease-out;
    max-height: 80vh;
    
    &.popup-show {
      transform: translateY(0);
    }
    
    .popup-header {
      position: relative;
      padding: 15px;
      text-align: center;
      border-bottom: 1px solid #f0f0f0;
      
      .popup-title {
        font-size: 16px;
        font-weight: bold;
        color: #333;
      }
      
      .close-btn {
        position: absolute;
        top: 15px;
        right: 15px;
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        color: #999;
      }
    }
    
    .break-time-content {
      padding: 0;
      
      .time-header {
        display: flex;
        justify-content: space-between;
        padding: 10px 20px;
        
        .start-time-header, .end-time-header {
          display: flex;
          flex-direction: column;
          
          .time-label {
            font-size: 12px;
            color: #999;
            margin-bottom: 5px;
          }
          
          .time-value {
            font-size: 18px;
            font-weight: bold;
            color: #333;
          }
        }
      }
      
      .duration-tag {
        display: flex;
        justify-content: center;
        margin: 5px 0 10px;
        
        text {
          background: #f0f7ff;
          padding: 3px 10px;
          border-radius: 4px;
          font-size: 12px;
          color: #3370ff;
        }
      }
      
      .picker-container {
        display: flex;
        height: 240px;
        position: relative;
        
        .time-picker {
          flex: 1;
          height: 240px;
          
          .picker-item {
            line-height: 40px;
            text-align: center;
            font-size: 16px;
            color: #333;
          }
        }
        
        .time-connector {
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 0 5px;
          z-index: 1;
          
          text {
            font-size: 14px;
            color: #333;
          }
        }
      }
    }
    
    .confirm-btn {
      height: 50px;
      background: #ffd000;
      color: #333;
      font-size: 16px;
      font-weight: bold;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      
      .btn-line {
        position: absolute;
        bottom: 10px;
        width: 40px;
        height: 4px;
        background: #333;
        border-radius: 2px;
      }
    }
  }
}
</style> 